﻿<script type="text/javascript">
$(function () {
    
        var colors = Highcharts.getOptions().colors,
            categories = ['H5点餐', '饿了么外卖', '美团外卖', '百度外卖','游戏平台'],
            name = '平台来源',
            data = [{
                    y: 12262,
                    color: '#FF82AB',
                    drilldown: {
                        name: 'H5点餐',
                        categories: ['1/1', '1/2', '1/3','1/4','1/5','1/6','1/7'],
                        data: [1693,2415,1146,1859,1436,1942,1771],
                        color: '#FF82AB'
                    }
                }, {
                    y: 4460,
                    color: '#87CEFA',
                    drilldown: {
                        name: '饿了么外卖',
                        categories: ['1/1', '1/2', '1/3','1/4','1/5','1/6','1/7'],
                        data: [588,406,275,677,364,856,1294],
                        color: '#87CEFA'
                    }
                }, {
                    y: 4761,
                    color: '#228B22',
                    drilldown: {
                        name: '美团外卖',
                        categories: ['1/1', '1/2', '1/3','1/4','1/5','1/6','1/7'],
                        data: [762,498,209,532,472,1356,932],
                        color: '#228B22'
                    }
                }, {
                    y: 3843,
                    color: '#FFC125',
                    drilldown: {
                        name: '百度外卖',
                        categories: ['1/1', '1/2', '1/3','1/4','1/5','1/6','1/7'],
                        data: [783,214,573,583,451,771,468],
                        color: '#FFC125'
                    }
                }, {
                    y: 1489,
                    color: '#836FFF',
                    drilldown: {
                        name: '游戏平台',
                        categories: ['1/1', '1/2', '1/3','1/4','1/5','1/6','1/7'],
                        data: [124,231,213,452,123,290,56],
                        color: '#836FFF'
                    }
                }];
    
    
        // Build the data arrays
        var browserData = [];
        var versionsData = [];
        for (var i = 0; i < data.length; i++) {
    
            // add browser data
            browserData.push({
                name: categories[i],
                y: data[i].y,
                color: data[i].color
            });
    
            // add version data
            for (var j = 0; j < data[i].drilldown.data.length; j++) {
                var brightness = 0.2 - (j / data[i].drilldown.data.length) / 5 ;
                versionsData.push({
                    name: data[i].drilldown.categories[j],
                    y: data[i].drilldown.data[j],
                    color: Highcharts.Color(data[i].color).brighten(brightness).get()
                });
            }
        }
    
        // Create the chart
        $('#container1').highcharts({
            chart: {
                type: 'pie'
            },
            title: {
                text: '爱快购销售报表',
                style: {
                    fontWeight: 'bold',
                    color: 'black',
                    fontSize: '25px', 
                    fontFamily: '微軟正黑體'
                }
            },
            subtitle: {
                text: 'By销售金额',
                style: {
                    fontWeight: 'bold',
                    color: 'black',
                    fontSize: '16px', 
                    fontFamily: '微軟正黑體'
                }
            },
            plotOptions: {
                pie: {
                    shadow: true,
                    center: ['50%', '50%']
                }
            },
            tooltip: {
        	    valueSuffix: '元'
            },
            series: [{
                name: '销售金额',
                data: browserData,
                size: '60%',
                dataLabels: {
                    formatter: function() {
                        return this.y > 5 ? this.point.name : null;
                    },
                    color: 'black',
                    distance: -30
                }
            }, {
                name: '销售金额',
                data: versionsData,
                size: '80%',
                innerSize: '60%',
                dataLabels: {
                    formatter: function() {
                        // display only if larger than 1
                        return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'元'  : null;
                    }
                }
            }]
        });
    });
$(function () {
    
        var colors = Highcharts.getOptions().colors,
            categories = ['H5点餐', '饿了么外卖', '美团外卖', '百度外卖','游戏平台'],
            name = '平台来源',
            data = [{
                    y: 12262,
                    color: '#FF82AB',
                    drilldown: {
                        name: 'H5点餐',
                        categories: ['1/1', '1/2', '1/3','1/4','1/5','1/6','1/7'],
                        data: [1693,2415,1146,1859,1436,1942,1771],
                        color: '#FF82AB'
                    }
                }, {
                    y: 4460,
                    color: '#87CEFA',
                    drilldown: {
                        name: '饿了么外卖',
                        categories: ['1/1', '1/2', '1/3','1/4','1/5','1/6','1/7'],
                        data: [588,406,275,677,364,856,1294],
                        color: '#87CEFA'
                    }
                }, {
                    y: 4761,
                    color: '#228B22',
                    drilldown: {
                        name: '美团外卖',
                        categories: ['1/1', '1/2', '1/3','1/4','1/5','1/6','1/7'],
                        data: [762,498,209,532,472,1356,932],
                        color: '#228B22'
                    }
                }, {
                    y: 3843,
                    color: '#FFC125',
                    drilldown: {
                        name: '百度外卖',
                        categories: ['1/1', '1/2', '1/3','1/4','1/5','1/6','1/7'],
                        data: [783,214,573,583,451,771,468],
                        color: '#FFC125'
                    }
                }, {
                    y: 1489,
                    color: '#836FFF',
                    drilldown: {
                        name: '游戏平台',
                        categories: ['1/1', '1/2', '1/3','1/4','1/5','1/6','1/7'],
                        data: [124,231,213,452,123,290,56],
                        color: '#836FFF'
                    }
                }];
    
    
        // Build the data arrays
        var browserData = [];
        var versionsData = [];
        for (var i = 0; i < data.length; i++) {
    
            // add browser data
            browserData.push({
                name: categories[i],
                y: data[i].y,
                color: data[i].color
            });
    
            // add version data
            for (var j = 0; j < data[i].drilldown.data.length; j++) {
                var brightness = 0.2 - (j / data[i].drilldown.data.length) / 5 ;
                versionsData.push({
                    name: data[i].drilldown.categories[j],
                    y: data[i].drilldown.data[j],
                    color: Highcharts.Color(data[i].color).brighten(brightness).get()
                });
            }
        }
    
        // Create the chart
        $('#container2').highcharts({
            chart: {
                type: 'pie'
            },
            title: {
                text: '爱快购销售报表',
                style: {
                    fontWeight: 'bold',
                    color: 'black',
                    fontSize: '25px', 
                    fontFamily: '微軟正黑體'
                }
            },
            subtitle: {
                text: 'By杯数',
                style: {
                    fontWeight: 'bold',
                    color: 'black',
                    fontSize: '16px', 
                    fontFamily: '微軟正黑體'
                }
            },
            plotOptions: {
                pie: {
                    shadow: true,
                    center: ['50%', '50%']
                }
            },
            tooltip: {
        	    valueSuffix: '元'
            },
            series: [{
                name: '杯数',
                data: browserData,
                size: '60%',
                dataLabels: {
                    formatter: function() {
                        return this.y > 5 ? this.point.name : null;
                    },
                    color: 'black',
                    distance: -30
                }
            }, {
                name: '杯数',
                data: versionsData,
                size: '80%',
                innerSize: '60%',
                dataLabels: {
                    formatter: function() {
                        // display only if larger than 1
                        return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'杯'  : null;
                    }
                }
            }]
        });
    });
		</script>
<div id="container1" style="min-width: 310px; height: 600px; margin: 0 auto"></div>
<div id="container2" style="min-width: 310px; height: 600px; margin: 0 auto"></div>